<template>
  <div v-if="isShowSkeleton" class="mt20">
    <van-skeleton title :row="5" />
  </div>
  <div v-else class="pageBox">
    <div class="star">
      <van-icon :name="otherData.data.is_favorite ? 'like' : 'like-o'" size="20"
        :color="otherData.data.is_favorite ? '#FF5000' : '#999999'" @click="handleFavorite(otherData.data)" />
    </div>
    <van-image :src="handleImgSrc(otherData.data.photo_url)" class="food-img" @click="previewImg(otherData.data)" />
    <div class="food-info">
      <div class="header bg-ff pt15 pb15 pl30 pr30">
        <div class="fs34 c-f00"><span class="fs24 mr2">¥</span>{{ otherData.data.fee }}</div>
        <div class="flexBox aiCenter flexBetween">
          <div class="fs30 c-333 f600"><span v-if="otherData.data.is_new">【新品】</span>{{ otherData.data.name }}</div>
          <div class="joinCart c-fff fs24" @click="joinCart">加入购物车</div>
        </div>
        <div class="flexBox aiCenter mt15">
          <span class="block fs24 c-666 mr30">推荐</span>
          <div class="fs24 mr15 c-main-1">共计售出 {{ otherData.data.sales }}+</div>
          <div class="fs24 mr15 c-main-1">10+回头客推荐</div>
          <div class="fs24 c-main-1">口味好评前10%商品</div>
        </div>
      </div>
      <div v-if="otherData.data.description || otherData.data.ingredients" class="content bg-ff mt30">
        <div v-if="otherData.data.description">
          <h1 class="fs30">商品详情</h1>
          <p class="fs26 mt10">{{ otherData.data.description }}</p>
        </div>
        <div v-if="otherData.data.ingredients" class="mt15">
          <h1 class="fs30">配料表</h1>
          <p class="fs26 mt10">{{ otherData.data.ingredients?.replaceAll(',', '，') }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { cancelFavorite, menuDetail, menuFavorite } from '@/api/menu'
import { onMounted, reactive, ref } from 'vue'
import menuStore from '@/store/modules/menu'
import { useRoute } from 'vue-router'
import { menuDetailType } from '@/types/menuTypes'
import { handleImgSrc } from '@/utils'
import router from '@/router'
import { showImagePreview } from 'vant'

const isShowSkeleton = ref(true)
const menu = menuStore()
const route = useRoute()

const otherData = reactive({
  data: {} as menuDetailType
})

const joinCart = () => {
  const { id, name, fee, photo_url } = otherData.data
  const currentItem = { id, name, fee, photo_url }
  const existingCart = [...menu.menuItems]

  // 检查是否已存在该商品
  const existingItemIndex = existingCart.findIndex(item => item.id === currentItem.id)

  if (existingItemIndex >= 0) {
    // 已存在，数量+1
    existingCart[existingItemIndex].quantity += 1
  } else {
    existingCart.push({
      ...currentItem,
      quantity: 1
    })
  }

  menu.setMenu(existingCart)
  router.push('/menu')
}

const previewImg = (row: menuDetailType) => {
  showImagePreview([
    handleImgSrc(row.photo_url)
  ])
}

const handleFavorite = async (item: menuDetailType) => {
  const postFn = item.is_favorite ? cancelFavorite : menuFavorite
  const { data } = await postFn({ menu_id: item.id })
  if (data.code === 0) {
    getDetail()
  }
}

const getDetail = async () => {
  const { data } = await menuDetail({ id: +route.params.id })
  if (data.code === 0) {
    isShowSkeleton.value = false
    otherData.data = data.data
  }
}

onMounted(() => {
  getDetail()
})
</script>

<style lang="scss" scoped>
.pageBox {
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;

  .star {
    position: absolute;
    top: -65px;
    right: 35px;
    z-index: 999;
  }

  .food-img {
    width: 100%;
    max-height: 600px;
    object-fit: fill;
  }

  .food-info {
    position: relative;
    padding: 15px;
    flex: 1;

    .header {
      position: relative;
      border-radius: 15px;
      margin-top: -60px;
      margin-bottom: 15px;

      .joinCart {
        background: #40a9ff;
        border-radius: 120px;
        padding: 10px 20px;
      }
    }

    .content {
      padding: 20px 30px;
      border-radius: 15px;
    }
  }
}
</style>